<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		.wrapper{
			height: 900px;
			width: 600px;
			display: flex;/*flex布局*/
			border: solid 1px #000;
			/*flex-wrap: nowrap;*//*不换行*/
			/*flex-wrap: wrap;*//*自动换行*/
			/*flex-direction: row;*//*行对齐*/
			/*flex-direction: row-reverse;*//*反向行对齐*/
			flex-direction: column;/*列对齐*/
			/*flex-flow: row wrap;*//*各种属性结合起来一起写*/
			justify-content: space-between;/*左右贴中间等空隙*/
			/*justify-content: space-around;*//*中间div的空隙是边缘距离的两倍*/
			/*justify-content: space-evenly;	*//*空隙距离等分*/
			justify-content: center;/*横向居中*/
			/*align-items: stretch;*//*当子相没有高度时,会自动铺满父相*/
			align-items: center;/*上下居中*/
			/*align-items: flex-end;*//*位于底部*/
			
		}	
		.div1{
			width: 180px;
			height: 200px;
			background-color: red;

		}
		.div2{
			width: 180px;
			height: 200px;
			background-color: green;


		}
		.div3{
			width: 180px;
			height: 200px;
			background-color: dodgerblue;

		}
		
	</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
		
	</body>
</html>
